<template>
	<section>
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column label="序号" align="center" width="80px">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{Number(scope.$index)+1}}</span>
				</template>
			</el-table-column>
			<el-table-column
				v-for="(val,key) in tableTitle"
				:prop="key"
				:label="val"
				width="180"
				align="center"
				:key="key"
			></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="warning" @click="detail(scope)" icon="el-icon-info" circle></el-button>
					<el-button type="primary" @click="updata(scope)" icon="el-icon-edit" circle></el-button>
					<el-button type="danger" @click="del(scope)" icon="el-icon-delete" circle></el-button>
				</template>
			</el-table-column>
		</el-table>
		<p style="margin-top: 15px;">
			<el-pagination
				background=""
				@current-change="handleCurrentChange"
				layout="prev, pager, next"
				:total="1000"
			></el-pagination>
		</p>
	</section>
</template>

<script>
export default {
  props: {
    tableTitle: Object,
    tableData: Array
  },
  data() {
    return {};
  },
  methods: {
    detail(scope) {
      this.$emit("detail", scope);
    },
    updata(scope) {
      this.$emit("updata", scope);
    },
    del(scope) {
      console.log(scope);
      this.$emit("del", scope);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    }
  }
};
</script>

<style scoped="scoped">
</style>